<template>
  <view class="home-page">
    <!-- <scroll-view :scroll-y="true" :style="{ height: scrollHeight + 'px' }"> -->
    <tm-sticky-header>
      <view class="flex flex-row-center-start pa-n10" :style="{ backgroundColor: defaultColor }">
        <view class="mr-n5">
          <tm-image :round="100" :width="88" :height="88" :src="userInfo.avatarUrl"></tm-image>
        </view>
        <view class="flex-1">
          <tm-row
            class="flex-row-center-start"
            bgColor="primary"
            align="center"
            style="background-color: primary"
            @click="onUserInfoClick"
          >
            <tm-text color="#fff" class="mr-10">{{ userInfo.name }}</tm-text>
            <tm-icon name="arrow-right-s-line" color="#fff"></tm-icon>
          </tm-row>
          <tm-row>
            <tm-image class="flex mr-10" width="30" height="30" :src="IconUserLevel"></tm-image>
            <tm-text color="#fff" fontSize="24">{{ userInfo.vipName }}</tm-text>
          </tm-row>
        </view>
        <view class="flex-shrink">
          <view class="flex-row-center-start round-2 flex pa-15" style="background-color: #fff">
            <tm-image
              :src="IconPhont"
              :width="40"
              :height="40"
              class="custom-tm-image mr-10"
            ></tm-image>
            <tm-text style="white-space: no-wrap">{{
              $trans('pages.index.customerSupport')
            }}</tm-text>
          </view>
        </view>
      </view>
    </tm-sticky-header>

    <!--  -->
    <tm-sheet margin="0" round="0" padding="0">
      <!-- swiper -->
      <swiper
        class="banner-swiper"
        circular
        :previous-margin="swiperConfig.previousMargin"
        :next-margin="swiperConfig.previousMargin"
        :autoplay="swiperConfig.autoplay"
        :interval="swiperConfig.interval"
        :duration="swiperConfig.duration"
      >
        <swiper-item v-for="item in swiperBanner.banner" :key="item">
          <view class="px-n4">
            <tm-image class="round-5" height="210" :src="item.img"></tm-image>
          </view>
        </swiper-item>
      </swiper>
    </tm-sheet>

    <!--  -->
    <tm-sheet margin="0" padding="0" round="0" color="#fff">
      <swiper
        class="fulled list-swiper"
        circular
        :autoplay="false"
        :indicator-dots="true"
        indicator-color="#e9e9e9"
        indicator-active-color="rgb(5, 121, 255)"
      >
        <swiper-item v-for="(listItem, listIndex) in swiperBanner.list" :key="listIndex">
          <tm-sheet
            height="90%"
            margin="0"
            :padding="0"
            round="0"
            class="flex flex-col flex-around"
            color="transparent"
          >
            <tm-row column="4">
              <template v-for="(item, index) in listItem" :key="index">
                <tm-col v-if="index < 4">
                  <tm-sheet
                    padding="0"
                    :margin="[0, 0, 0, 0]"
                    class="text-align-center"
                    color="transparent"
                  >
                    <tm-image :src="item.icon" :width="84" :height="84"></tm-image>
                    <tm-text color="#000001" fontSize="21">{{ item.name }}</tm-text>
                  </tm-sheet>
                </tm-col>
              </template>
            </tm-row>
            <tm-row column="4">
              <template v-for="(item, index) in listItem" :key="index">
                <tm-col v-if="index > 3">
                  <tm-sheet
                    padding="0"
                    :margin="[0, 0, 0, 0]"
                    class="text-align-center"
                    color="transparent"
                  >
                    <tm-image :src="item.icon" :width="84" :height="84"></tm-image>
                    <tm-text color="#000001" fontSize="21">{{ item.name }}</tm-text>
                  </tm-sheet>
                </tm-col>
              </template>
            </tm-row>
          </tm-sheet>
        </swiper-item>
      </swiper>
    </tm-sheet>

    <!--  -->
    <tm-sheet color="#fff" :padding="[0, 20, 0, 0]" round="0" margin="0">
      <tm-image :src="assetsImgs.FastTradeBanner"></tm-image>
    </tm-sheet>

    <!-- <tm-sticky-header> -->
    <tm-row column="2" class="mt-n5">
      <tm-col :span="1">
        <tm-text class="ml-n5" color="#959eb0">{{ $trans('pages.index.searchCardTitle') }}</tm-text>
        <tm-sheet class="flex flex-between">
          <tm-text>{{ selectCardItem.name }}</tm-text>
          <tm-icon name="arrow-down-s-fill"></tm-icon>
        </tm-sheet>
      </tm-col>
      <tm-col :span="1">
        <tm-text class="ml-n5" color="#959eb0">{{
          $trans('pages.index.cardCurrencyTitle')
        }}</tm-text>
        <tm-sheet class="flex flex-between">
          <tm-text>{{ selectCurrencyItem.name }}</tm-text>
          <tm-icon name="arrow-down-s-fill"></tm-icon>
        </tm-sheet>
      </tm-col>
    </tm-row>
    <!-- </tm-sticky-header> -->

    <tm-sheet color="#fff">
      <tm-sheet v-for="(item, index) in cardList" :key="index" :shadow="10" :margin="[0, 0, 0, 24]">
        <tm-row align="center" :wrap="false">
          <tm-image
            :round="10"
            :width="80"
            :height="80"
            :src="item.user.photo"
            class="flex-shrink fast-transaction-pop-icon"
          ></tm-image>
          <view class="ml-n5">
            <tm-row>
              <tm-text color="#000001" fontSize="32" lineHeight="1">{{
                item.user.nickname
              }}</tm-text>
            </tm-row>
            <tm-row :wrap="false" class="mt-10">
              <tm-text color="#959eb0" fontSize="24" lineHeight="1"
                >{{ item.turnover / 1000 }}K {{ $trans('pages.index.list.item.trades') }}</tm-text
              >
              <tm-text color="#959eb0" fontSize="24" lineHeight="1" class="ml-n5">
                <tm-icon color="#959eb0" name="thumb-up-fill" size="24"></tm-icon>
                {{ item.haopingNum / 1000 }}K
              </tm-text>
              <tm-text fontSize="24" lineHeight="1" color="#959eb0" class="ml-n4"
                >{{ $trans('pages.index.list.item.limits') }} {{ item.minTrade }}-{{
                  item.maxTrade
                }}</tm-text
              >
            </tm-row>
          </view>
        </tm-row>
        <tm-row class="my-20" justify="space-between">
          <tm-row align="center">
            <tm-image :width="28" :height="28" :src="assetsImgs.IconHomeUnit"></tm-image>
            <tm-text fontSize="24" class="mx-n2 text-weight-b">₦</tm-text>
            <tm-text>{{ item.referenceAmount }}</tm-text>
            <tm-image
              :width="28"
              :height="28"
              :src="assetsImgs.IconHomeUp"
              class="mx-n2"
            ></tm-image>
            <tm-text color="#e6bb67" fontSize="28">84.40</tm-text>
            <tm-row align="center" class="relative ml-n5">
              <tm-image :width="135" :height="44" :src="VipNameBg"></tm-image>
              <tm-text fontSize="20" lineHeight="1" color="#e6bb67" class="absolute r-10 t-10">{{
                item.user.vipName
              }}</tm-text>
            </tm-row>
          </tm-row>

          <tm-row>
            <tm-icon name="time-line"></tm-icon>
            <tm-text class="mx-n2">{{ item.monthAvgTradeTimes }} </tm-text>
            <tm-text>{{ $trans('pages.index.list.item.min') }}</tm-text>
          </tm-row>
        </tm-row>
        <tm-sheet class="relative" :padding="[20, 0]" margin="0" height="56">
          <tm-image
            class="absolute l-0 t-0"
            :src="assetsImgs.BgHomeTicket"
            model="scaleToFill"
            width="100%"
            height="100%"
          ></tm-image>
          <tm-row class="fulled-height relative" align="center" :wrap="false">
            <tm-image
              class="mr-n2"
              :src="assetsImgs.IconHomeTicket"
              :width="44"
              :height="28"
            ></tm-image>
            <tm-text class="mr-n4" fontSize="20" color="#f78513">{{
              $trans('pages.index.list.item.bonusCouponUpto')
            }}</tm-text>
            <tm-text class="flex-1" fontSize="24" color="#f78513">{{ '+6%' }}</tm-text>
            <tm-text fontSize="24" color="#f78513"
              >{{ $trans('pages.index.list.item.expireIn') }} {{ '7 days' }}</tm-text
            >
          </tm-row>
        </tm-sheet>
        <tm-row align="center" justify="space-between" class="mt-n5">
          <tm-button size="xs" skin="outlined" width="120" backg round="100">{{
            $trans('pages.index.list.item.physical')
          }}</tm-button>
          <tm-button size="s" round="100" @click="onToSell(item)">{{
            $trans('pages.index.list.item.sell')
          }}</tm-button>
        </tm-row>
      </tm-sheet>
    </tm-sheet>
    <!-- </scroll-view> -->

    <!-- Fast Transaction -->
    <view class="fast-transaction-pop">
      <tm-image
        :round="100"
        :width="180"
        :height="180"
        :preview="false"
        :src="assetsImgs.FastTransaction"
        class="fast-transaction-pop-icon"
        @click="onToFastTransaction"
      ></tm-image>
    </view>
  </view>
</template>
<script lang="ts" setup>
  import IconUserLevel from '@/assets/images/icon-user-level.png';
  import IconPhont from '@/assets/images/icon-phone.png';
  import Icon1 from '@/assets/images/icon1.png';
  import VipNameBg from '@/assets/images/vip-name-bg.png';
  import { getDefaultColor } from '@/uni_modules/tm-ui/libs/colors';
  import { CARD_LIST } from './MOCK';
  import { assetsImgs } from '@/assets/images';
  import { translate } from '@/locale';

  const userInfo = ref({
    avatarUrl: 'https://store.tmui.design/api_v2/public/random_picture',
    name: 'Jabari',
    vipName: 'Bronze VIP',
    inviteId: '1234',
  });
  const swiperConfig = reactive({
    autoplay: true,
    interval: 3000,
    duration: 500,
    previousMargin: uni.upx2px(40) + 'px',
    nextMargin: uni.upx2px(40) + 'px',
  });
  const swiperBanner = reactive({
    banner: [
      { img: assetsImgs.Banner1 },
      { img: assetsImgs.Banner2 },
      { img: assetsImgs.Banner3 },
      { img: assetsImgs.Banner3 },
    ],
    list: [
      [
        {
          name: translate('pages.index.swiper.banner.list.payBills'),
          icon: assetsImgs.IconPayBills,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.fastTransaction'),
          icon: assetsImgs.IconFastTransaction,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.flashOffers'),
          icon: assetsImgs.IconFlashOffers,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.dailyRewards'),
          icon: assetsImgs.IconDailyRewards,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.bonusCoupons'),
          icon: assetsImgs.IconBonusCoupons,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.spinWin'),
          icon: assetsImgs.IconIndexSwiperSpin,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.referEarn'),
          icon: assetsImgs.IconIndexSwiperRefer,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.rateCalculator'),
          icon: assetsImgs.IconRateCalculator,
          link: '',
        },
      ],
      [
        {
          name: translate('pages.index.swiper.banner.list.dailyRates'),
          icon: assetsImgs.IconDailyRates,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.wallet'),
          icon: assetsImgs.IconIndexSwiperWallet,
          link: '',
        },
        {
          name: translate('pages.index.swiper.banner.list.charity'),
          icon: assetsImgs.IconIndexSwiperCharity,
          link: '',
        },
      ],
    ],
  });

  const scrollHeight = ref(0);
  const defaultColor = ref('');
  const selectCardItem = reactive({
    name: 'Razer',
  });
  const selectCurrencyItem = reactive({
    name: 'USD',
  });

  const cardList = ref([]);
  const pageObj = reactive({
    page: 1,
    pageSize: 10,
    total: 0,
  });

  const onUserInfoClick = () => {
    // uni.navigateTo({
    //   url: "/pages/register/index",
    // })
  };

  const getCardList = () => {
    cardList.value = CARD_LIST;
  };

  const onToSell = (item: any) => {
    uni.navigateTo({
      url: '/pages/sellCard/index?id=' + item.id,
    });
  };

  const onToFastTransaction = () => {
    uni.navigateTo({
      url: '/pages/fastTransaction/index',
    });
  };

  onMounted(() => {
    scrollHeight.value = uni.getWindowInfo().safeArea.height;
    defaultColor.value = getDefaultColor('primary');
    getCardList();
  });

  onReachBottom(() => {
    console.log('onReachBottom');
  });
</script>
<style lang="scss" scoped>
  @keyframes imgScale {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  .home-page {
    swiper.banner-swiper {
      width: 100%;
      height: 210rpx;
      padding: 10px 0;
    }

    swiper.list-swiper {
      height: 180px;
      swiper-item {
        background-color: #fff;
      }
    }

    .fast-transaction-pop {
      position: fixed;
      right: 0;
      bottom: 36%;
      z-index: 999;

      .fast-transaction-pop-icon {
        animation: imgScale 1.2s ease-in-out infinite 0s;
      }
    }

    .vip-name {
      // width: ;
    }
  }
</style>
